<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
 
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
 
<%@ page isELIgnored="false" %>
<html> 
	<head>
		<title>JSP for LeaveMessageForm form</title>
		<script src="dwr/interface/CommentAction.js"></script>
		<script src="dwr/engine.js"></script> 
		<script src="dwr/util.js"></script>
		<script type="text/javascript">

			function show(id){
				var item = document.getElementById(id);
				if(item.lastChild){
					if(item.childNodes.length > 2){
						//var firstItem = item.firstChild;
						//alert(firstItem.style.dispaly)
						//firstItem.style.dispaly = "block";
						//alert(firstItem.style.dispaly)
						var firstItem = item.firstChild;
						firstItem.style.display = "block";
					}
					if(item.childNodes.length > 1){
						var lastItem = item.lastChild;
						
						lastItem.style.display = "block";
						
					}
				}
			}
			
			
			
			function showAll(item){
				var next = item;
				next.style.display = "none";
				while(next.nextSibling) {
					next = next.nextSibling;
					next.style.display = "block";
				}
			}
			
			
			function reply(){
				var reply_content = DWRUtil.getValue("reply_content");
				var commentId = DWRUtil.getValue("commentId");
				var replyMessage = {commentId:commentId, content:reply_content};
				
				CommentAction.commentReply(replyMessage, replyCallBack);
			}
			
			function replyCallBack(data) {
				var liItem = document.createElement("li");
				var str = "<a href=\"user.do?uid=" + data.replyUserNo + "\">" + data.replyUserName + "</a><span style=\"margin-left:30px;\">" + data.time.toLocaleString() + "</span><pre style=\"margin-top:5px;padding-left:10px;\">" + data.content + "</pre>";
				liItem.innerHTML = str;
				liItem.style.display = "block";
				var ul = document.getElementById(data.commentId)
				ul.appendChild(liItem);
				hideReplyBox();
			}
			
			
			
			function deleteById(id){
				LeaveMessageAction.deleteReceiveMessage(id, deleteCallBack);
				
				
			}
			
			function deleteCallBack(data){
				alert("删除成功");
				var theItem = document.getElementById("li" + data);
				var parent = theItem.parentNode;
	
				parent.removeChild(theItem);
			}
			
			function showReplyBox(id) {
				var div=document.getElementById('reply_box_'+id);
				var default_div = document.getElementById('default_reply_box');
				document.getElementById("commentId").value = id;
				document.getElementById("reply_content").value = "";
				div.appendChild(default_div);
				
				default_div.style.display = "";
			}
			function hideReplyBox(){
				var default_div = document.getElementById('default_reply_box');
				document.getElementById("commentId").value = "";
				document.getElementById("reply_content").value = "";
				default_div.style.display = "none";
			}
		</script>
		<style>
		.ul .check{
			cursor: pointer;
		}
		
		.ul li{
			display:none;
		}
		
		</style>
	</head>

	<body>
		
		新留言数:<c:out value="${requestScope.unread}"></c:out>
		
		<div id="default_reply_box" style="display:none;">
            <input type="hidden" name="commentId" id="commentId">
                    <div class="lydj">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr class="lyt">
                                <td width="20">&nbsp;</td>
                                <td>回复留言：</td>
                                <td width="20">

                                
                                </td>
                            </tr>
                            <tr class="lyn">
                                <td>&nbsp;</td>
                                <td><div class="hackbox2"></div>
                                    <div id="face" style="display:none; position:absolute; z-index:1000;width:260px; height:276px"></div>
                                    <textarea id="reply_content" name="reply_content"></textarea>

                                    <div class="lyan">
                                        <span class="lyal">
                                        <input id="reply_button" type="button" class="btn2" style="cursor:pointer" value="回复留言" onclick="reply()" />&nbsp;
                                        <input type="button" class="btn2" style="cursor:pointer" value="取消" onClick="hideReplyBox()" /></span>
                                        <span class="lyar">还可以输入<span id="contentSize">500</span>字</span>
                                    </div>
                                </td>

                       <td>&nbsp;</td>
                    </tr>
                 </table>
             </div>
         </div>
		
		<ul id="leave">
			<c:forEach items="${requestScope.list}" var="data">
			<li id="li${data.id}">
				<a href="user.do?uid=${data.sendUserNo}"><c:out value="${data.sendUserName}"/></a><br/>
				<pre>${data.content}</pre><br/>
				<fmt:formatDate value="${data.time}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
				<ul id="${data.id}" class="ul">
					<li class="check" onclick="showAll(this)">查看完整对话</li>
				<c:forEach items="${data.commentReply}"  var="reply">
					<li>
					<a href="user.do?uid=${reply.replyUserNo}"><c:out value="${reply.replyUserName}"/></a><br/>
				<pre>${reply.content}</pre><br/>
				<fmt:formatDate value="${reply.time}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
					</li>
				</c:forEach>
				</ul>
				<script>
					show(${data.id})
				</script>
				<a href="javascript:showReplyBox(${data.id})">回复</a>&nbsp;<a href="javascript:deleteById(${data.id})">删除</a>
				<div id="reply_box_${data.id}"></div>
			</li>
			</c:forEach>
			
		</ul>
		
		<c:out value="${requestScope.url}" escapeXml="false"></c:out>
	</body>
</html>

